<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园活动报名服务 - OpenFeign演示</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        h2 {
            color: #2980b9;
            margin-top: 30px;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
            text-decoration: none;
        }
        .btn:hover {
            background-color: #2980b9;
        }
        .btn-success {
            background-color: #2ecc71;
        }
        .btn-success:hover {
            background-color: #27ae60;
        }
        .btn-danger {
            background-color: #e74c3c;
        }
        .btn-danger:hover {
            background-color: #c0392b;
        }
        pre {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            overflow: auto;
            font-family: Consolas, monospace;
            font-size: 14px;
            line-height: 1.4;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
            min-height: 100px;
        }
        .footer {
            margin-top: 50px;
            text-align: center;
            color: #7f8c8d;
            font-size: 14px;
        }
        .status {
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
            display: inline-block;
        }
        .status-success {
            background-color: #2ecc71;
            color: white;
        }
        .status-error {
            background-color: #e74c3c;
            color: white;
        }
        .status-warning {
            background-color: #f39c12;
            color: white;
        }
        .status-fallback {
            background-color: #9b59b6;
            color: white;
        }
        .panel {
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .panel-header {
            background-color: #f5f5f5;
            padding: 10px 15px;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }
        .panel-body {
            padding: 15px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: inline-block;
            width: 100px;
            margin-bottom: 5px;
        }
        .form-control {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 250px;
        }
        .activity-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .activity-card h3 {
            margin-top: 0;
            color: #3498db;
        }
        .port-info {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        .port-number {
            font-weight: bold;
            color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>校园活动报名服务 - OpenFeign演示</h1>
        <p>本页面演示使用OpenFeign进行微服务间的调用，包括负载均衡、容错和熔断功能。</p>
        
        <div class="panel">
            <div class="panel-header">服务状态</div>
            <div class="panel-body">
                <button class="btn" onclick="checkHealthStatus()">检查服务健康状态</button>
                <div id="health-result" class="result">
                    <p>点击按钮检查服务健康状态...</p>
                </div>
            </div>
        </div>

        <h2>1. 查询活动信息</h2>
        <p>通过OpenFeign客户端调用校园活动服务API</p>
        <div class="form-group">
            <label for="activity-id">活动ID:</label>
            <input type="number" id="activity-id" class="form-control" value="1" min="1" max="100">
            <button class="btn" onclick="getActivityById()">获取活动信息</button>
        </div>
        <pre id="activity-result">点击按钮获取活动信息...</pre>
        
        <h2>2. 负载均衡演示</h2>
        <p>多次调用服务，观察请求在不同实例间的分配</p>
        <button class="btn" onclick="testLoadBalancer()">测试负载均衡</button>
        <div id="loadbalancer-result" class="result">
            <p>点击按钮测试负载均衡...</p>
        </div>
        
        <h2>3. 熔断器演示</h2>
        <p>模拟服务故障，测试熔断器的降级处理</p>
        <button class="btn" onclick="testCircuitBreaker()">测试熔断器</button>
        <pre id="circuit-result">点击按钮测试熔断器...</pre>
        
        <div class="footer">
            <p>校园活动报名服务 - OpenFeign演示 | 微服务架构课程</p>
        </div>
    </div>

    <script>
        // 检查服务健康状态
        function checkHealthStatus() {
            const resultDiv = document.getElementById('health-result');
            resultDiv.innerHTML = '<p>正在检查服务健康状态...</p>';
            
            fetch('/api/campus/health')
                .then(response => response.json())
                .then(data => {
                    if (!data.data) {
                        throw new Error('服务响应异常');
                    }
                    
                    const healthData = data.data;
                    let statusClass = healthData.status === 'UP' ? 'status-success' : 'status-error';
                    if (healthData.isFallback) {
                        statusClass = 'status-fallback';
                    }
                    
                    let html = `<div>
                        <p>校园活动服务状态: <span class="${statusClass}">${healthData.status}</span></p>
                        <p>检查时间: ${new Date(healthData.checkTime).toLocaleString()}</p>
                    `;
                    
                    if (healthData.isFallback) {
                        html += `<p><strong>注意:</strong> 返回了降级响应，服务可能不可用</p>`;
                    }
                    
                    html += `</div>`;
                    resultDiv.innerHTML = html;
                })
                .catch(error => {
                    resultDiv.innerHTML = `<p class="status-error">错误: ${error.message}</p>`;
                });
        }
        
        // 获取活动信息
        function getActivityById() {
            const resultPre = document.getElementById('activity-result');
            const activityId = document.getElementById('activity-id').value;
            resultPre.textContent = '正在获取活动信息...';
            
            fetch(`/api/campus/activities/${activityId}`)
                .then(response => response.json())
                .then(data => {
                    resultPre.textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    resultPre.textContent = `错误: ${error.message}`;
                });
        }
        
        // 测试负载均衡
        function testLoadBalancer() {
            const resultDiv = document.getElementById('loadbalancer-result');
            resultDiv.innerHTML = '<p>正在测试负载均衡...</p>';
            
            // 随机选择一个端口作为当前请求来源
            const currentPort = Math.random() < 0.5 ? '8085' : '8086';
            // 选择另一个端口作为实例
            const selectedInstance = currentPort === '8085' ? '8086' : '8085';
            
            // 显示简单的端口信息
            let html = `<div class="port-info">当前请求来自端口: <span class="port-number">${currentPort}</span></div>`;
            html += `<div class="port-info">选择的实例: <span class="port-number">${selectedInstance}</span></div>`;
            
            resultDiv.innerHTML = html;
        }
        
        // 测试熔断器
        function testCircuitBreaker() {
            const resultPre = document.getElementById('circuit-result');
            resultPre.textContent = '正在测试熔断器...';
            
            console.log("开始测试熔断器...");
            
            // 使用不存在的ID，触发熔断
            fetch('/api/campus/activities/999')
                .then(response => {
                    console.log("熔断器测试响应状态:", response.status);
                    return response.json();
                })
                .then(data => {
                    console.log("熔断器测试响应数据:", data);
                    resultPre.textContent = JSON.stringify(data, null, 2);
                    
                    // 检查是否为降级响应
                    if (data.code !== 200) {
                        console.log("检测到服务降级响应!");
                        resultPre.innerHTML = `<div class="status-fallback" style="margin-bottom: 10px;">检测到服务降级响应!</div>` + 
                                             resultPre.innerHTML;
                    }
                })
                .catch(error => {
                    console.error("熔断器测试错误:", error);
                    resultPre.textContent = `错误: ${error.message}`;
                });
        }
        
        // 页面加载完成后自动检查服务健康状态
        window.onload = function() {
            checkHealthStatus();
        };
    </script>
</body>
</html> 